<template>
	<view class="page">
		<!-- 订单列表 -->
		<view class="header-top flex text-center font-size-15 font-color-888">
			<text
				class="header-item flex-1 font-size-15"
				v-for="(tab , i) in tab_list"
				:key="i"
				:class="{'active':i==tab_index}"
				@click="changeTab(i)"
			>{{tab.name}}</text>
		</view>

		<view class="container">
			<block v-for="(item,index) in tab_list[tab_index].all_list" :key="index">
				<consult-order-list
					v-if="item.type == 'consult'"
					:item="item"
					@orderCancel="orderCancel($event)"
				>
				</consult-order-list>
				<activity-order-list v-else :item="item" @orderCancel="orderCancel($event)"></activity-order-list>
			</block>
			<no-more v-if="tab_list[tab_index].all_list.length<=0"></no-more>
		</view>
		<!-- <no-more v-if="tab_list[tab_index].index_page >= tab_list[tab_index].total_page"></no-more> -->
	</view>
</template>

<script>
import { orderList, orderCancel } from '@/utils/http'
import consultOrderList from '@/components/consult-order-list'
import activityOrderList from '@/components/activity-order-list'
export default {
	data() {
		return {
			tab_list: [],
			tab_index: 0
		}
	},
	components: {
		consultOrderList,
		activityOrderList
	},
	methods: {
		changeTab(i) {
			this.tab_index = i
			const current_tab = this.tab_list[this.tab_index]
			if (current_tab.index_page == 0) {
				this.getOrderList()
			}
		},
		getOrderList() {
			let current_tab = this.tab_list[this.tab_index]
			orderList({
				page: current_tab.index_page + 1,
				type: current_tab.type,
				status: current_tab.status
			}).then(res => {
				if (res) {
					current_tab.index_page = res.current_page
					current_tab.total_page = res.last_page
					current_tab.all_list = [
						...res.data,
						...current_tab.all_list
					]
				} else {
					current_tab.total_page = current_tab.index_page
				}
			})
		},
		orderCancel(options) {
			orderCancel({
				order_no: options.order_no,
				type: options.type
			}).then(res => {
				if (res) {
					this.init()
					this.getOrderList()
				}
			})
		},

		goChat() {
			uni.navigateTo({
				url: '/pages/chat/index'
			})
		},
		//初始化数据
		init() {
			this.tab_list = [
				{
					name: '全部',
					type: '',
					status: '',
					index_page: 0,
					total_page: 1,
					all_list: []
				},
				{
					name: '预约咨询',
					type: 'consult',
					index_page: 0,
					total_page: 1,
					status: '',
					all_list: []
				},
				{
					name: '活动报名',
					type: 'activity',
					status: '',
					index_page: 0,
					total_page: 1,
					all_list: []
				},
				{
					name: '待评价',
					type: '',
					status: 2,
					index_page: 0,
					total_page: 1,
					all_list: []
				},
				{
					name: '已完成',
					type: '',
					status: 3,
					index_page: 0,
					total_page: 1,
					all_list: []
				}
			]
			this.tab_index = 0
		}
	},
	//下拉刷新
	onPullDownRefresh() {
		this.init()
		this.getOrderList()
	},
	//上拉加载
	onReachBottom() {
		let current_tab = this.tab_list[this.tab_index]
		if (current_tab.index_page < current_tab.total_page) {
			this.getOrderList()
		}
	},
	onLoad() {
		this.init()
		this.getOrderList()
	},
	onReady() {
		//const res = uni.getSystemInfoSync()
	}
}
</script>

<style scoped>
.header-top {
	padding: 15px 10px;
}
.header-top .active {
	font-weight: bold;
	color: #0088ff !important;
}
</style>